<template>
    <view class="content">
        <view class="u-p-b-35">
			<u-search placeholder="搜索内容" shape="square" :show-action="false" bg-color="#f3f4f5" search-icon-color="#1f3b67"
				v-model="keyword" @search="doSearch"></u-search>
		</view>
		
		<view class="item" v-for="(item, index) in list" :key="index" @click="livePlayer(item)">
			<image :src="item.image_uri" class="img"></image>
			<view class="u-rela">
				<view class="title">{{item.name}}</view>
				<view class="name" v-if="item.member">主讲人：{{item.member}}</view>
				<view class="down">
					<view class="time">{{item.pbegin}}</view>
					<view class="start" v-if="item.status == 1">
						<image src="../../static/icon/icon_7.png" class="icon-6"></image>
						<view>未开始</view>
					</view>
					<view class="ing" v-if="item.status == 3">
						<image src="../../static/icon/icon_6.png" class="icon-6"></image>
						<view>直播中</view>
					</view>
					<!-- 已结束 -->
					<image src="../../static/icon/icon_8.png" class="icon-8" v-if="item.status == 4"></image>
				</view>
			</view>
		</view>
		
		<view style="height: 94rpx;padding-top: 30rpx;">
		    <u-loadmore :status="status" v-if="status != 'loadmore'" />
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [], 
				keyword: '',
            };
        },
        onLoad() {
            
        },
        onShow() {
            this.page = 1
            this.list = []
            this.status = 'loadmore'
            this.getList()
        },
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
        methods: {
            livePlayer(item) {
            	if (item.status == 1) {
            		this.$toast('未开始');
            		return false;
            	} else if (item.status == 3 && item.url) {
            		wx.navigateTo({
            			url: item.url,
            		})
            	} else if (item.status == 4) {
            		this.$toast('已结束');
            		return false;
            	}
            },
			
			doSearch() {
				this.page = 1
				this.list = []
				this.status = 'loadmore'
				this.getList()
			},
			
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('applets/live_list', {
            		userToken: this.$getSync('userToken'),
            		page: this.page,
            		limit: 10,
					is_recommend: 1,//是否首页推荐 0-否 1-是
					keywords: this.keyword,
            	}).then(ret => {
            		if (ret.status == 0) {
            			if (ret.data.length > 0) {
            				this.list = this.list.concat(ret.data);
            				this.page++;
            				this.status = 'loadmore'
            			} else {
            				this.status = 'nomore'
            			}
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #fff;
    }
	.content{
		padding: 20rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 40rpx;
	}
	.img{
		width: 210rpx;
		height: 210rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	.title{
		font-size: 32rpx;
		font-weight: bold;
		width: 475rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.name{
		font-size: 26rpx;
		color: #333333;
		padding-top: 10rpx;
	}
	.down{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 70rpx;
	}
	.time{
		font-size: 24rpx;
		color: #7d7d7d;
	}
	.ing{
		width: 126rpx;
		height: 40rpx;
		background-color: #fde6e5;
		border-radius: 6rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #ef4034;
	}
	.icon-6{
		width: 21rpx;
		height: 21rpx;
		margin-right: 8rpx;
	}
	.start{
		width: 126rpx;
		height: 40rpx;
		background-color: #f0f4fa;
		border-radius: 6rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #1f5bbe;
	}
	.icon-8{
		width: 134rpx;
		height: 132rpx;
		position: absolute;
		right: 0;
		bottom: -10rpx;
	}
	
	
	

</style>
